<template>
  <div class="container">
    <div class="header">
      <el-select
        size="small"
        v-model="addInfo.provinceCode"
        placeholder="省"
        @change="changprovince"
        style="width: 45%; margin-right: 5%; margin-bottom: 3%"
        clearable
      >
        <el-option
          v-for="(item, i) in provinceList"
          :key="i"
          :label="item.regionName"
          :value="item.regionCode"
        >
        </el-option>
      </el-select>

      <el-select
        size="small"
        v-model="addInfo.cityCode"
        placeholder="市"
        @change="changcity"
        style="width: 45%"
        clearable
      >
        <el-option
          v-for="(item, i) in cityList"
          :key="i"
          :label="item.regionName"
          :value="item.regionCode"
        >
        </el-option>
      </el-select>
      <el-select
        size="small"
        v-model="addInfo.areaCode"
        placeholder="区"
        @change="changarea"
        style="width: 45%; margin-right: 5%"
        clearable
      >
        <el-option
          v-for="(item, i) in areaList"
          :key="i"
          :label="item.regionName"
          :value="item.regionCode"
        >
        </el-option>
      </el-select>
      <el-select
        size="small"
        v-model="addInfo.streetCode"
        placeholder="街道"
        @change="changestreet"
        style="width: 45%"
        clearable
      >
        <el-option
          v-for="(item, i) in streetList"
          :key="i"
          :label="item.regionName"
          :value="item.regionCode"
        >
        </el-option>
      </el-select>

      <el-select
        size="small"
        v-model="addInfo.communityCode"
        @change="changecommunity"
        clearable
        :style="
          user.roleName == 'TENANT_ADMIN'
            ? 'width: 45%;margin-top: 3%;margin-bottom: 3%;margin-right: 5%;'
            : 'width: 95%;margin-top: 3%;margin-bottom: 3%;margin-right: 5%;'
        "
        placeholder="请选择社区"
      >
        <el-option
          v-for="(item, i) in communityList"
          :key="i"
          :label="item.regionName"
          :value="item.regionCode"
        >
        </el-option>
      </el-select>
      <el-button
        size="mini"
        type="primary"
        @click="addSubmit"
        style="border-radius: 5px"
        >确 定</el-button
      >
      <el-button
        size="mini"
        type="info"
        @click="closeAddDialog"
        style="border-radius: 5px"
        >重 置</el-button
      >
    </div>
    <div class="tree-box">
      <Tree
        ref="refTree"
        @toggleOrgId="toggleOrgId"
        @toggleOrgList="toggleOrgList"
      ></Tree>
    </div>
  </div>
</template>

<script>
import {
  reqRegion,
  reqCity,
  reqArea,
  reqStreet,
  reqCommunity,
} from "@api/apiDatav.js";
import Tree from "@components/tree/Tree.vue"; //组织机构
import { mapState } from "vuex";
export default {
  components: { Tree },
  props: [],
  mixins: [],
  data() {
    return {
      addInfo: {
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        streetCode: "",
        communityCode: "",
      },
      provinceList: [], //省
      cityList: [], //市
      areaList: [], //区
      streetList: [], //街道
      communityList: [], //社区

      regionlist: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 查询组织机构
    async searchClick() {
      this.loadingSearch = true;
      this.$refs.refTree.handleParam(this.form);
      this.loadingSearch = false;
    },
    // 确认按钮
    addSubmit() {
      this.drawer = false;
      this.$emit("regionSubmit", this.regionlist);
    },

    // 重置单位
    closeAddDialog() {
      this.addInfo = {
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        streetCode: "",
        communityCode: "",
      };
      this.cityList = []; //市
      this.areaList = []; //区
      this.streetList = []; //街道
      this.communityList = []; //社区

      this.$emit("regionClose", this.regionlist);
    },

    // 省级行政区域
    async getRegion() {
      let res = await reqRegion({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.Regionlist = res.data.row;
      this.provinceList = res.data.row;
    },

    // 根据省查询市
    async changprovince(val) {
      this.addInfo.address = "";
      this.cityList = [];
      this.addInfo.city = "";
      this.addInfo.cityCode = "";
      this.areaList = [];
      this.addInfo.area = "";
      this.addInfo.areaCode = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqCity({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: val,
      });
      this.cityList = res.data.row;

      console.log("addinfo", this.addInfo);
      this.$refs.refTree.handleParam({
        regionCode: val,
        regionLevel: 1,
      });
    },
    // 根据市查询区
    async changcity(val) {
      this.addInfo.address = "";
      this.areaList = [];
      this.addInfo.area = "";
      this.addInfo.areaCode = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqArea({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: val,
      });
      this.areaList = res.data.row;

      this.$refs.refTree.handleParam({
        regionCode: val,
        regionLevel: 2,
      });
    },
    // 根据区查询街道
    async changarea(val) {
      this.addInfo.address = "";
      this.streetList = [];
      this.addInfo.street = "";
      this.addInfo.streetCode = "";
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqStreet({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: val,
      });
      this.streetList = res.data.row;
      this.$refs.refTree.handleParam({
        regionCode: val,
        regionLevel: 3,
      });
    },
    // 街道查社区
    async changestreet(val) {
      this.communityList = [];
      this.addInfo.community = "";
      this.addInfo.communityCode = "";
      const res = await reqCommunity({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: val,
      });
      if (res.data.row[0].regionCode == "") {
        this.communityList = [];
        return;
      }
      this.communityList = res.data.row;

      this.$refs.refTree.handleParam({
        regionCode: val,
        regionLevel: 4,
      });
    },
    // 社区名称赋值
    async changecommunity(val) {
      // 组织
      this.$refs.refTree.handleParam({
        regionCode: val,
        regionLevel: 5,
      });
    },

    // 获取组织结构列表
    toggleOrgList(data) {
      console.log("获取组织结构列表", data);
      this.regionlist = data;
    },

    // 切换组织机构
    toggleOrgId(data) {
      this.$emit("toggleOrg", data);
    },
  },
};
</script>


<style scoped lang="less">
.container {
  width: 100%;
  height: calc(100% - 90px);

  .header {
    .el_input {
      border-radius: 5px !important;

      ::v-deep .el-input__inner {
        background: #001f5b !important;
        border: 1px solid #192a5f !important;
      }
    }
  }

  ::v-deep .el-input__inner {
    background: #001f5b !important;
    border: 1px solid #192a5f !important;
  }

  .tree-box {
    height: calc(100% - 150px);
    // background: rgb(156, 253, 184);
  }
}
</style>
